<template>
  <div class="error-500">
    <!-- 故障艺术背景 -->
    <div class="glitch-bg" ref="glitchBg"></div>
    
    <!-- 主要内容 -->
    <div class="error-content">
      <!-- 故障化的 500 文字 -->
      <div class="error-code">
        <h1 class="glitch-text" data-text="500">500</h1>
        <div class="glitch-overlay"></div>
      </div>
      
      <!-- 错误信息 -->
      <div class="error-info">
        <h2 class="error-title">服务器发生了一些问题</h2>
        <p class="error-message">系统正在经历技术困难，请稍后再试</p>
        
        <!-- 故障效果的错误详情 */
        <div class="error-details" v-if="showDetails">
          <div class="terminal">
            <div class="terminal-header">
              <span class="terminal-title">错误日志</span>
              <div class="terminal-controls">
                <span class="control red"></span>
                <span class="control yellow"></span>
                <span class="control green"></span>
              </div>
            </div>
            <div class="terminal-body">
              <div class="log-line" v-for="(log, index) in errorLogs" :key="index" 
                   :style="{ animationDelay: index * 0.1 + 's' }">
                <span class="log-prefix">{{ log.prefix }}</span>
                <span class="log-text" :class="log.type">{{ log.text }}</span>
              </div>
              <div class="cursor-line">
                <span class="log-prefix">$</span>
                <span class="typing-cursor">_</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="error-actions">
          <button @click="refreshPage" class="action-btn primary">刷新页面</button>
          <button @click="goHome" class="action-btn secondary">返回首页</button>
          <button @click="toggleDetails" class="action-btn ghost">
            {{ showDetails ? '隐藏' : '显示' }}详情
          </button>
        </div>
      </div>
    </div>
    
    <!-- 故障粒子效果 -->
    <div class="glitch-particles" ref="particlesContainer"></div>
    
    <!-- 扫描线效果 -->
    <div class="scan-lines"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'

// 响应式数据
const glitchBg = ref(null)
const particlesContainer = ref(null)
const showDetails = ref(false)

// 错误日志模拟数据
const errorLogs = ref([
  { prefix: '[ERROR]', text: 'Internal server error occurred', type: 'error' },
  { prefix: '[INFO]', text: 'Attempting to restart service...', type: 'info' },
  { prefix: '[WARN]', text: 'Memory usage: 98%', type: 'warning' },
  { prefix: '[ERROR]', text: 'Database connection timeout', type: 'error' },
  { prefix: '[INFO]', text: 'Fallback systems activated', type: 'info' },
  { prefix: '[DEBUG]', text: 'Stack trace: /api/handler.js:42', type: 'debug' }
])

// 动画引用
let glitchAnimation, particleAnimation

// 页面 SEO
useHead({
  title: '500 - 服务器错误',
  meta: [
    { name: 'description', content: '服务器遇到了技术问题，我们正在努力修复' }
  ]
})

// 创建故障粒子效果
function createGlitchParticles() {
  if (!particlesContainer.value) return

  const particleCount = 30
  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div')
    particle.className = 'glitch-particle'
    particle.style.left = Math.random() * 100 + '%'
    particle.style.top = Math.random() * 100 + '%'
    particle.style.animationDelay = Math.random() * 2 + 's'
    particle.style.animationDuration = (2 + Math.random() * 3) + 's'
    
    // 随机故障颜色
    const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']
    particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]
    
    particlesContainer.value.appendChild(particle)
  }
}

// 故障艺术动画
function startGlitchAnimation() {
  // 背景故障效果
  glitchAnimation = gsap.timeline({ repeat: -1, repeatDelay: 2 })
  
  glitchAnimation
    .to('.glitch-bg', {
      duration: 0.1,
      skewX: 10,
      filter: 'hue-rotate(90deg)',
      ease: 'power4.inOut'
    })
    .to('.glitch-bg', {
      duration: 0.05,
      skewX: -5,
      filter: 'hue-rotate(180deg)',
      ease: 'power4.inOut'
    })
    .to('.glitch-bg', {
      duration: 0.1,
      skewX: 0,
      filter: 'hue-rotate(0deg)',
      ease: 'power4.inOut'
    })
  
  // 文字故障效果
  gsap.to('.glitch-text', {
    duration: 0.1,
    x: () => Math.random() * 10 - 5,
    y: () => Math.random() * 10 - 5,
    repeat: -1,
    repeatDelay: 3,
    yoyo: true
  })
  
  // 粒子动画
  particleAnimation = gsap.to('.glitch-particle', {
    duration: 2,
    x: () => Math.random() * 200 - 100,
    y: () => Math.random() * 200 - 100,
    rotation: () => Math.random() * 360,
    scale: () => Math.random() * 2,
    repeat: -1,
    yoyo: true,
    stagger: 0.1
  })
}

// 切换详情显示
function toggleDetails() {
  showDetails.value = !showDetails.value
  
  if (showDetails.value) {
    gsap.fromTo('.error-details', 
      { opacity: 0, y: 30 },
      { opacity: 1, y: 0, duration: 0.5, ease: 'power3.out' }
    )
  }
}

// 刷新页面
function refreshPage() {
  // 添加刷新动画
  gsap.to('.error-500', {
    duration: 0.5,
    opacity: 0,
    scale: 0.9,
    ease: 'power2.inOut',
    onComplete: () => {
      window.location.reload()
    }
  })
}

// 返回首页
function goHome() {
  gsap.to('.error-500', {
    duration: 0.5,
    opacity: 0,
    x: -100,
    ease: 'power2.inOut',
    onComplete: () => {
      navigateTo('/')
    }
  })
}

// 组件挂载
onMounted(() => {
  // 创建粒子效果
  createGlitchParticles()
  
  // 开始故障动画
  startGlitchAnimation()
  
  // 入场动画
  gsap.timeline()
    .fromTo('.error-code', 
      { opacity: 0, scale: 0.5 },
      { opacity: 1, scale: 1, duration: 1, ease: 'back.out(1.7)' }
    )
    .fromTo('.error-info', 
      { opacity: 0, y: 50 },
      { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' }, '-=0.5'
    )
    .fromTo('.scan-lines', 
      { opacity: 0 },
      { opacity: 0.1, duration: 1 }, '-=0.8'
    )
})

// 组件卸载
onUnmounted(() => {
  if (glitchAnimation) glitchAnimation.kill()
  if (particleAnimation) particleAnimation.kill()
})
</script>

<style scoped>
.error-500 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0a0a0a;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  color: white;
}

/* 故障艺术背景 */
.glitch-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 0, 0, 0.03) 2px,
      rgba(255, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 0, 0.03) 2px,
      rgba(0, 255, 0, 0.03) 4px
    );
  z-index: 1;
}

/* 扫描线效果 */
.scan-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 2px,
    rgba(255, 255, 255, 0.05) 4px
  );
  z-index: 2;
  animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* 主要内容 */
.error-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  max-width: 800px;
  width: 90%;
}

/* 故障化的错误代码 */
.error-code {
  position: relative;
  margin-bottom: 3rem;
}

.glitch-text {
  font-size: 8rem;
  font-weight: bold;
  color: #ff0040;
  margin: 0;
  position: relative;
  text-shadow: 
    0.05em 0 0 #00fffc,
    -0.05em -0.025em 0 #ff0040,
    0.025em 0.05em 0 #ffff00;
  animation: glitchText 2s infinite;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  animation: glitchBefore 3s infinite;
  color: #ff0040;
  z-index: -1;
}

.glitch-text::after {
  animation: glitchAfter 2s infinite;
  color: #00fffc;
  z-index: -2;
}

@keyframes glitchText {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitchBefore {
  0%, 100% { transform: translate(0); }
  15% { transform: translate(-5px, -2px); opacity: 0.8; }
  30% { transform: translate(3px, 2px); opacity: 0.6; }
  45% { transform: translate(-2px, 3px); opacity: 0.8; }
  60% { transform: translate(4px, -1px); opacity: 0.7; }
  75% { transform: translate(-3px, -2px); opacity: 0.9; }
}

@keyframes glitchAfter {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(2px, -3px); opacity: 0.7; }
  50% { transform: translate(-4px, 1px); opacity: 0.5; }
  75% { transform: translate(3px, 4px); opacity: 0.8; }
}

/* 错误信息 */
.error-info h2 {
  font-size: 2rem;
  color: #ffffff;
  margin: 0 0 1rem 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.error-message {
  font-size: 1.2rem;
  color: #cccccc;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

/* 终端错误详情 */
.error-details {
  margin: 2rem 0;
  text-align: left;
}

.terminal {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 8px;
  border: 1px solid #333;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

.terminal-header {
  background: #1e1e1e;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
}

.terminal-title {
  color: #ffffff;
  font-size: 0.9rem;
}

.terminal-controls {
  display: flex;
  gap: 0.5rem;
}

.control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.control.red { background: #ff5f56; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #27ca3f; }

.terminal-body {
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  max-height: 200px;
  overflow-y: auto;
}

.log-line {
  margin: 0.5rem 0;
  opacity: 0;
  animation: logAppear 0.5s forwards;
}

.log-prefix {
  color: #888;
  margin-right: 0.5rem;
}

.log-text.error { color: #ff6b6b; }
.log-text.warning { color: #ffd93d; }
.log-text.info { color: #74c0fc; }
.log-text.debug { color: #51cf66; }

.cursor-line {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}

.typing-cursor {
  background: #00ff00;
  color: #000;
  animation: cursorBlink 1s infinite;
  padding: 0 2px;
}

@keyframes logAppear {
  to { opacity: 1; }
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* 操作按钮 */
.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.action-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.action-btn.primary {
  background: linear-gradient(45deg, #ff0040, #ff6b6b);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 0, 64, 0.3);
}

.action-btn.primary:hover {
  background: linear-gradient(45deg, #ff1654, #ff8a80);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 0, 64, 0.4);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.action-btn.ghost {
  background: transparent;
  color: #888;
  border: 1px solid #444;
}

.action-btn.ghost:hover {
  color: #fff;
  border-color: #666;
  background: rgba(255, 255, 255, 0.05);
}

/* 故障粒子效果 */
.glitch-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.glitch-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ff0040;
  animation: particleGlitch 3s infinite;
}

@keyframes particleGlitch {
  0%, 100% { 
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% { 
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .glitch-text {
    font-size: 4rem;
  }
  
  .error-info h2 {
    font-size: 1.5rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 200px;
  }
  
  .terminal-body {
    font-size: 0.8rem;
  }
}

/* 禁用文字选择 */
.error-500 {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>
